import React, { useState } from 'react'
import DigitalHuman from '../../components/DigitalHuman'
import './Index.css'

function Index() {
  const [isSpeaking, setIsSpeaking] = useState(false)
  const [selectedAction, setSelectedAction] = useState('默认动作')
  const [language, setLanguage] = useState('zh')
  const [theme, setTheme] = useState('light')

  const actions = [
    '默认动作',
    '肘击',
    '拐',
    '点头',
    '摇头'
  ]

  const handleActionChange = (action) => {
    setSelectedAction(action)
    // 这里可以添加3D模型动作切换逻辑
    console.log('切换到动作:', action)
  }

  const handleLanguageToggle = () => {
    setLanguage(language === 'zh' ? 'en' : 'zh')
  }

  const handleThemeToggle = () => {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }

  const handleSpeakingToggle = () => {
    setIsSpeaking(!isSpeaking)
  }

  return (
    <div className="main-container">
      {/* 页面头部 */}
      <header className="page-header">
        <div className="header-background">
          <img src="/src/assets/imgs/ceil.png" alt="头部背景" className="header-bg-img" />
        </div>
        
        <div className="header-content">
          {/* 右侧按钮 */}
          <div className="header-buttons">
            <button className="exhibition-btn">进入3D展览馆</button>
            <button className="lang-btn" onClick={handleLanguageToggle}>
              {language === 'zh' ? 'English' : '中文'}
            </button>
            <button className="theme-btn" onClick={handleThemeToggle}>
              切换主题
            </button>
          </div>
        </div>
      </header>

      {/* 中间部分 */}
      <main className="main-content">
        <div className="main-background">
          <img src="/src/assets/imgs/indexLightBackground.png" alt="主背景" className="main-bg-img" />
        </div>

        {/* 左上角动作切换下拉框 */}
        <div className="action-selector">
          <select 
            value={selectedAction} 
            onChange={(e) => handleActionChange(e.target.value)}
            className="action-dropdown"
          >
            {actions.map((action,index) => (
              <option key={index} value={index}>{action}</option>
            ))}
          </select>
        </div>

        {/* 右上角AI提示 */}
        <div className="ai-notice">
          <img src="/src/assets/imgs/notice.gif" alt="AI提示" className="notice-gif" />
        </div>

        {/* 左侧3D数字人 */}
        <div className="digital-human-section">
          <div className="human-model">
            <DigitalHuman action={selectedAction} />
          </div>
        </div>

        {/* 右侧视频框 */}
        <div className="video-section">
          <div className="video-frame">
            <img src="/src/assets/imgs/border.png" alt="视频框" className="video-border" />
            <div className="video-content">
              <div className="video-player">
                <div className="video-placeholder">
                  <p>视频播放区域</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* 页面底部 */}
      <footer className="page-footer">
        <div className="footer-background">
          <img src="/src/assets/imgs/floor.png" alt="底部背景" className="footer-bg-img" />
        </div>
        
        <div className="speaking-icon-container">
          <img 
            src={isSpeaking ? "/src/assets/imgs/speeching.gif" : "/src/assets/imgs/speaking.jpeg"} 
            alt="语音图标" 
            className="speaking-icon"
            onClick={handleSpeakingToggle}
          />
        </div>
      </footer>
    </div>
  )
}

export default Index
